<template>
  <div class="g-bd">
    <div class="n-mylv">
      <h2 class="tit">等级特权</h2>
      <a href="javascript:;" class="myleve" @click.prevent="$router.go(-1)">
        查看我的等级
        <i></i>
      </a>
      <div class="list">
        <div class="tip">
          <span class="th1">等级</span>
          <span class="th2">特权</span>
        </div>
        <ul class="m-detail">
          <li>
            <span class="n-level">
              <i></i>
              1
            </span>
            <span>5G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限20</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              2
            </span>
            <span>5G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限20</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              3
            </span>
            <span>5G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限20</span>
            <span class="point"></span>
            <span>云音乐商城满100减3元优惠券</span>
            <span class="point"></span>
            <span>价值50云贝</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
             4
            </span>
            <span>40G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限20</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              5
            </span>
            <span>40G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限20</span>
            <span class="point"></span>
            <span>云音乐商城满100减6元优惠券</span>
            <span class="point"></span>
            <span>价值100云贝</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              6
            </span>
            <span>60G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限40</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              7
            </span>
            <span>60G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限80</span>
            <span class="point"></span>
            <span>云音乐商城满100减9元优惠券</span>
            <span class="point"></span>
            <span>价值400云贝</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              1
            </span>
            <span>60G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限100</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              1
            </span>
            <span>60G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限120</span>
            <span class="point"></span>
            <span>云音乐商城满100减12元优惠券</span>
            <span class="point"></span>
            <span>价值1200云贝</span>
          </li>
          <li>
            <span class="n-level">
              <i></i>
              10
            </span>
            <span>100G音乐云盘免费容量</span>
            <span class="point"></span>
            <span>黑名单上限140</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped lang="less">
.g-bd {
  width: 980px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .n-mylv {
    position: relative;
    z-index: 1;
    zoom: 1;
    padding: 25px 30px;
    .tit{
      padding-left: 14px;
      font-size: 22px;
      line-height: 32px;
      font-weight: 400;
      font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
    }
    .myleve{
      position: absolute;
      right: 25px;
      top: 40px;
      color: #0e73ba;
      i{
        display: inline-block;
        width: 7px;
        height: 12px;
        margin-left: 5px;
        vertical-align: middle;
        background: url(../../../assets/gtblue.png?5890c0d…);
      }
    }
    .list{
      .tip{
        padding-top: 6px;
        padding-left: 14px;
        height: 32px;
        line-height: 32px;
        border-bottom: solid 1px #e6e6e6;
        color: #666;
        .th1{

        }
        .th2{
          margin-left: 46px;
        }
      }
      .m-detail{
        li{
          height: 51px;
          padding-top: 20px;
          overflow: hidden;
          border-bottom: solid 1px #e6e6e6;
          padding-left: 14px;
          color: #666;
          .n-level{
            width: 46px;
            display: inline-block;
            position: relative;
            margin-left: 25px;
            zoom: 1;
            font-family: Arial;
            font-size: 18px;
            font-weight: 700;
            color: #e03a24;
            font-style: italic;
            i{
              position: absolute;
              left: -25px;
              top: 0;
              width: 25px;
              height: 22px;
              background-position: 0 -25px;
              background-image: url("../../../assets/mylevel.png");
            }
          }
          .point{
            display: inline-block;
            vertical-align: middle;
            width: 4px;
            height: 4px;
            margin-left: 15px;
            margin-right: 15px;
            background: url(../../../assets/addico.png?3d72b42…);
          }
          span{

          }
        }
      }
    }
  }
}
</style>